<template>
	<view class="container">
		<navbar :title="navTitle"></navbar>
		<view class="list">
			<view class="item" v-for="(item,i) in list" :key="i">
				<view class="name">
					{{item.name}}
				</view>
				<view class="right">
					<view class="price">￥{{item.price}}</view>
					<button @click="openApply(item)">调价申请</button>
				</view>
			</view>
		</view>
		
		
		<popupBox ref="apply" contentBG="#FFFFFF" @confirm="confirm">
			<view class="p-toast">
				<view class="title">
					调价申请
				</view>
				<view class="inp">
					<view class="i-box">
						<text>￥</text>
						<input type="number" v-model="newPrice" />
					</view>
				</view>
			</view>
		</popupBox>
	</view>
</template>

<script>
	import { getServiceGoodsDetail, applyPrice } from '@/utils/api/serviceApi.js'
	import popupBox from '../../components/popup/popup.vue';
	export default {
		components:{
			popupBox
		},
		data() {
			return {
				type:null,
				navTitle:'',
				goods_id:'',
				info:{},
				list:[],
				skuItem:{},
				newPrice:''
			};
		},
		onLoad(data) {
			this.goods_id = data.id
			this.getServiceGoodsDetail()
		},
		methods:{
			getServiceGoodsDetail(){
				getServiceGoodsDetail({id:this.goods_id}).then(res=>{
					uni.setNavigationBarTitle({
						title:res.data.name
					})
					this.info = res.data
					if(res.data.sku.length>0){
						let arr = []
						res.data.sku.forEach(e=>{
							arr.push({
								...e,
								isSku:true
							})
						})
						this.list = arr
					}else{
						this.list = [{
							name:res.data.name,
							price:res.data.price,
							isSku:false
						}]
					}
				})
			},
			openApply(data){
				this.skuItem = data
				this.$refs.apply.open()
			},
			confirm(){
				applyPrice({
					goods_id:this.goods_id,
					price:[this.newPrice ],
					sku_id:this.skuItem.isSku ? this.skuItem.id : ''
				}).then(res=>{
					if(res.code==1){
						this.$refs.apply.close()
						uni.showToast({
							title:'提交成功',
							icon:'none'
						})
					}
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
.container{
	.list{
		.item{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 40rpx 22rpx;
			box-sizing: border-box;
			border-bottom: 2rpx solid #EEEEEE;
			.name{
				font-weight: bold;
				font-size: 32rpx;
				color: #000000;
				line-height: 44rpx;
			}
			.right{
				display: flex;
				align-items: center;
				.price{
					font-weight: bold;
					font-size: 32rpx;
					color: #FF4A4A;
					line-height: 44rpx;
					padding-right: 90rpx;
				}
				button{
					width: 168rpx;
					height: 64rpx;
					background: #E72A2A;
					border-radius: 8rpx;
					font-weight: 400;
					font-size: 32rpx;
					color: #FFFFFF;
					line-height: 64rpx;
				}
			}
		}
	}
}
.p-toast{
	padding: 0 40rpx;
	box-sizing: border-box;
	.title{
		padding: 32rpx 0 0;
		box-sizing: border-box;
		font-weight: bold;
		font-size: 36rpx;
		color: #000000;
		line-height: 50rpx;
		text-align: center;
	}
	.inp{
		padding: 28rpx 0 54rpx;
		box-sizing: border-box;
		.i-box{
			border-radius: 8rpx;
			border: 2rpx solid #B4B4B4;
			display: flex;
			text{
				display: block;
				width: 98rpx;
				height: 98rpx;
				font-weight: 400;
				font-size: 48rpx;
				color: #333333;
				line-height: 98rpx;
				text-align: center;
				border-right: 2rpx solid #B4B4B4;
			}
			input{
				width: calc(100% - 100rpx);
				height: 98rpx;
				font-weight: 400;
				font-size: 48rpx;
				color: #B4B4B4;
				padding: 0 24rpx;
				box-sizing: border-box;
			}
		}
	}
}
</style>
